<template>
  <!-- 标题展示 -->
  <!-- <div class="click-home">
    <van-nav-bar
      title="数据服务"
      :left-text="showTime"
      @click-left="showTimeDialog"
      @click-right="initData(new Date().getTime())"
    >
      <template #right>
        <img
          class="refresh"
          src="../../assets/img/refresh.png"
          alt=""
          srcset=""
        />
      </template>
    </van-nav-bar>
  </div> -->
  <!-- 展示的图片 -->
  <div class="show-img">
    <img src="../../assets/img/banner1.png" alt="" />
  </div>
  <!-- 展示消息 -->
  <div class="show-message" v-if="showText">
    <img src="../../assets/img/mailbox.png" alt="" />
    <span class="show-message-line">|</span>
    <span class="font-control">温馨提示：此时段吃饭人数已满，请稍后！</span>
  </div>
  <!-- 循环展示内容 -->
  <template v-for="(item, index) in list" :key="index">
    <div class="selectList">
      <selectList
        :close="true"
        @handlerParent="handlerParent"
        :showInfo="item"
        @intervalCount="intervalCount"
        @stopInterval="stopInterval"
        :refreshTimer="refreshTimer"
      />
    </div>
  </template>
  <!-- 时间选择 -->
  <div class="show-time" @click="showTimeDialog">
    {{showTime}}
  </div>
  <!-- 时间选择 -->
  <van-popup v-model:show="show" position="bottom" :style="{ height: '50%' }">
    <van-datetime-picker
      v-model="currentTime"
      type="time"
      title="选择时间"
      :min-hour="10"
      :max-hour="24"
      @confirm="confirm"
      @cancel="cancel"
    />
  </van-popup>
</template>

<script>
import { defineComponent, onMounted, reactive, ref, watch } from "@vue/runtime-core";
import { GetListSelect, GetPeopleNumber, GetMinutsTime } from "@/api/index";
import selectList from "../../components/selectList.vue";
import { initDate } from "@/utils/utils";

export default defineComponent({
  components: {
    selectList,
  },
  setup() {
    const list = reactive([]);
    const showText = ref(false);
    const currentTime = ref("12:30");
    const show = ref(false);
    const refreshTimer = ref(false);
    const showTime = ref("12:30");
    const handlerParent = (e) => {
      console.log(e);
    };
    // 方法区域
    const getPeopleNumber = (item) => {
      GetPeopleNumber({ position: item.id, time: new Date().getTime() }).then(
        (res) => {
          // console.log("res1", res);
          let _res = res.data;
          for (let i = 0; i < list.length; i++) {
            const _list = list[i];
            if (_list.id == item.id) {
              _list.text = _res.number + "人";
              break;
            }
          }
        }
      );
    };
    const getMinutsTime = (item, index) => {
      GetMinutsTime({ position: item.id, time: new Date().getTime() }).then(
        (res) => {
          let _res = res.data;
          if(index == 0) {
            _res.times = 1;
          } else {
            _res.times = 1.5;
          }
          for (let i = 0; i < list.length; i++) {
            const _list = list[i];
            if (_list.id == item.id) {
              _list.times = _res.times;
              _list.count = _res.count;
              _list.timer = true;
              _list.timeCount = _res.times * 60;
              break;
            }
          }
        }
      );
    };
    // 弹出时间
    const showTimeDialog = () => (show.value = true);
    // 点击取消
    const cancel = () => {
      show.value = false;
      currentTime.value = showTime.value;
    };
    // 定时器的处理
    const intervalCount = (item) => {
      for (let i = 0; i < list.length; i++) {
        const _lis = list[i];
        if (_lis.id == item.id) {
          _lis.timeCount--;
          break;
        }
      }
    };
    // 关闭定时器
    const stopInterval = (item) => {
       for (let i = 0; i < list.length; i++) {
        const _lis = list[i];
        if (_lis.id == item.id) {
          _lis.timer = false;
          _lis.times = 0;
          break;
        }
      }
    };
    // 点击确认
    const confirm = () => {
      show.value = false;
      showTime.value = currentTime.value;
      let time = initDate() + " " + showTime.value;
      initData(new Date(time).getTime());
    };
    // 初始化数据
    const initData = (time) => {
      list.length = 0;
      GetListSelect({ time: time }).then((res) => {
        let _data = res.data;
        _data.forEach((item, index) => {
          list.push(item);
          getPeopleNumber(item);
          getMinutsTime(item, index);
        });
      });
    };
    // 获取当前时间
    const initMinutes = () => {
      let date = new Date();
      let miu =
        date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes();
      let time = date.getHours() + ":" + miu;
      showTime.value = time;
      currentTime.value = time;
    };
    // 请求后台接口
    onMounted(() => {
      initData(new Date().getTime());
      initMinutes();
    });
    // watch 监听等待时间为0的温馨提示
    watch(list, (now, old) => {
      let count = 0;
      // console.log('now', now)
      for (let i = 0; i < now.length; i++) {
        const _nw = now[i];
        // console.log(_nw)
        if (_nw.timeCount == 0) {
          count++;
        }
      }
      if (count == now.length) {
        showText.value = false
      } else {
        showText.value = true
      }
    })
    return {
      list,
      handlerParent,
      currentTime,
      showTimeDialog,
      show,
      confirm,
      cancel,
      showTime,
      currentRate: 50,
      rate: 100,
      initData,
      intervalCount,
      stopInterval,
      refreshTimer,
      showText,
    };
  },
});
</script>

<style lang="less" scoped>
.click-home {
  /deep/ .van-nav-bar__text {
    // display: none;
    color: #fff;
  }
  /deep/ .van-nav-bar {
    background: #2263b6;
    .van-nav-bar__title {
      color: #fff;
    }
  }
  .refresh {
    width: 40px;
    height: 40px;
  }
}
.show-img {
  // height: 514px;
  // width: 100%;
  max-width: 750px;
  img {
    width: 100%;
    object-fit: cover;
  }
}
.show-message {
  height: 90px;
  border-bottom: 1px solid #d4d4d4;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 30px;
  .show-message-line {
    // font-size: 20px;
    padding: 0 10px;
  }
  img {
    // height: 46px;
    margin-top: -4px;
    padding-left: 20px;
    width: 80px;
  }
  .font-control {
    font-size: 28px;
  }
}
.font14 {
  font-size: 14px;
}
.selectList {
  margin: 16px;
}
.show-time{
  position: fixed;
  right: 20px;
  bottom: 20px;
}
</style>
